<template>
	<view id="buyDetail" v-if="detail.list.name">
		<!-- 个人信息 -->
		<view class="wx-message">
			<image :src="detail.list.headimgurl ? detail.list.headimgurl : detail.list.headimgurl2" mode="aspectFill" class="wx-head"></image>
			<view class="wx-nickname">
				<view class="wx-name">{{ detail.list.nickname ? detail.list.nickname : detail.list.nickname2 }}</view>
				<view>{{ detail.list.time }}</view>
			</view>
			<view class="img-download" @click="xCollect" v-if="detail.list.if_self == 2">+ 收藏</view>
			<view class="img-download" @click="undercarriage" v-if="detail.list.if_self == 1">下架</view>
		</view>
		<view style="height: 132rpx;"></view>
		<view class="padding-box">
			<!-- 轮播图-->
			<view class="buy-detail-banner">
				<swiper class="swiper" :duration="500" :indicator-dots="false" :autoplay="true" @change="bindDots">
					<swiper-item v-if="detail.video.url" @longpress="saveVideo(detail.video.url)">
						<video id="myVideo" :src="detail.video.url" :poster="detail.video.cover" controls class="swiper-item"></video>
					</swiper-item>
					<swiper-item v-for="(item, index) in detail.img" :key="item.id">
						<image :src="IMG_URL + item.img_url" mode="aspectFill" class="swiper-item" @click="lookImg(index, 1)"></image>
					</swiper-item>
				</swiper>
				<!-- 轮播图标点 -->
				<view class="dots">
					<view class="dots-item" :class="{ 'dots-item-active': bannerIndex === 0 }" v-if="detail.video.url"></view>
					<view
						class="dots-item"
						:class="{ 'dots-item-active': detail.video.url ? bannerIndex === index + 1 : bannerIndex === index }"
						v-for="(item, index) in detail.img"
						:key="index"
					></view>
				</view>
				<!-- 直播icon -->
				<view class="banner-live" @click.stop="onLive" v-if="detail.list.roomid">
					<icon class="icon-BFTB"></icon>
					<text>直播</text>
				</view>
			</view>
			<!-- 猫咪名字性格 -->
			<view class="cat-name">
				<text>{{ detail.list.name }}</text>
				<text>{{ detail.list.temper }}</text>
			</view>
			<!-- 描述 -->
			<view class="cat-describe" @longpress="wxCopy(detail.list.note, '描述')">{{ detail.list.note }}</view>
			<!-- 猫咪信息 -->
			<view class="title-txt">猫咪信息</view>
			<view class="cat-msg">
				<view class="cat-msg-item">
					<text>发布类型：</text>
					{{ type == 2 ? '征婚&交友' : '出售' }}
				</view>
				<view class="cat-msg-item">
					<text>疫苗：</text>
					{{ detail.list.needle_num }}针
				</view>
				<view class="cat-msg-item">
					<text>艺名：</text>
					{{ detail.list.name }}
				</view>
				<view class="cat-msg-item">
					<text>绝育：</text>
					{{ detail.list.jueyu == 1 ? '是' : '否' }}
				</view>
				<view class="cat-msg-item">
					<text>身份证：</text>
					{{ detail.list.cat_id }}
				</view>
				<view class="cat-msg-item">
					<text>驱虫：</text>
					{{ detail.list.drug == 1 ? '是' : '否' }}
				</view>
				<view class="cat-msg-item">
					<text>生日：</text>
					{{ detail.list.birth }}
				</view>
				<view class="cat-msg-item">
					<text>价格：</text>
					¥{{ detail.list.price }}
				</view>
				<view class="cat-msg-item">
					<text>性别：</text>
					{{ detail.list.sex == 1 ? 'DD' : 'MM' }}
				</view>
				<view class="cat-msg-item">
					<text>状态：</text>
					{{ type == 2 ? "寻找有缘'喵'..." : '等你带它回家' }}
				</view>
				<view class="cat-msg-item">
					<text>星座：</text>
					{{ detail.list.cons }}
				</view>
				<view class="cat-msg-item">
					<text>颜色：</text>
					{{ detail.list.color }}
				</view>
				<view class="cat-msg-item">
					<text>品种：</text>
					{{ detail.list.type }}
				</view>
				<view class="cat-msg-item">
					<text>籍贯：</text>
					{{ detail.list.province }} {{ detail.list.city }}
				</view>
			</view>
			<!-- 血缘关系 -->
			<block v-if="type == 4 && (detail.father.length > 0 && detail.mother.length > 0)">
				<view class="title-txt">血缘关系</view>
				<view class="blood">
					<view class="blood-img">
						<image :src="IMG_URL + detail.father[0].img_url" mode="aspectFill" @click="lookBloodImg(IMG_URL + detail.father[0].img_url)"></image>
						<icon class="icon-father"></icon>
					</view>
					<image src="https://nabercat.oss-cn-hangzhou.aliyuncs.com/acat-xcx/maoaiqing.png" mode="aspectFill" class="blood-zj-img"></image>
					<view class="blood-img">
						<image :src="IMG_URL + detail.mother[0].img_url" mode="aspectFill" @click="lookBloodImg(IMG_URL + detail.mother[0].img_url)"></image>
						<icon class="icon-mother"></icon>
					</view>
				</view>
			</block>
			<!-- 联系购买 -->
			<block>
				<view class="title-txt" v-if="type == 4">联系铲屎官</view>
				<view class="buy-lianxi">
					<text class="lx_1" v-if="type == 4">如果有意向带它回家，</text>
					<text class="lx_2" v-if="type == 4" style="margin-right: 20rpx;">请截图此页或复制此页猫咪身份证并咨询客服</text>
					<!-- <text class="lx_3" @click="setClipboardData" v-if="type == 4">点击</text> -->
					<text class="lx_4" @click="catBlindDate">我也想发布？</text>
				</view>
			</block>
			<!-- 跳转公众号 -->
			<view class="tz-gzh" v-if="type == 2" @click="bindWmedia()">
				<view class="tz-top">
					<icon class="icon-lj"></icon>
					<text>{{ wmedia.title }}</text>
				</view>
				<view class="tz-bot">{{ wmedia.subtitle }}</view>
			</view>
			<!-- 点击获取红包 -->
			<view class="get-hongbao" v-if="type == 4" @click="bindWebView">
				点击分享获得
				<text>{{ detail.list.fans_baseprice }}</text>
				<text>元</text>
				现金
			</view>
			<!-- 联系方式 -->
			<!-- <block v-if="type == 2">
				<view class="title-txt">联系方式</view>
				<view class="buy-lianxi">
					<text class="lx_2">联系微信：</text>
					<text class="lx_4" @click="wxCopy(detail.list.wx, '微信号')">{{ detail.list.wx }}</text>
				</view>
			</block> -->
			<!-- 买家反馈 -->
			<block v-if="feedBackList.length > 0 && type == 4">
				<view class="title-txt">买家反馈</view>
				<scroll-view class="buyer-feedback" scroll-x="true" enable-flex="true">
					<view class="buyer-feedback-item" v-for="(item, index) in feedBackList" :key="index">
						<image :src="IMG_URL + item.imgs[0].img_url" mode="aspectFill" @click="bindDetail(item)"></image>
						<text>{{ item.content }}</text>
					</view>
				</scroll-view>
			</block>
			<!-- 品牌信息 -->
			<view class="title-txt">品牌信息</view>
			<!-- <view class="brand-info-box"></view> -->
			<image v-if="type == 4" class="brand-info-box" src="https://nabercat.oss-cn-hangzhou.aliyuncs.com/acat-xcx/maomippxx.png"></image>
			<image v-if="type == 2" class="brand-info-box" src="https://nabercat.oss-cn-hangzhou.aliyuncs.com/acat-xcx/xqzlicont.png"></image>
			<!-- <view class="brand-info-box">
				<image src="https://nabercat.oss-cn-hangzhou.aliyuncs.com/acat-xcx/ljdm-tx99.jpg" mode="aspectFill" class="brand-info-box-left"></image>
				<view class="brand-info-box-right">
					<view>NABERCAT 邻家的猫，更放心</view>
					<view v-if="type == 2">NABERCAT 是一个专注猫咪的互联网+品牌。此征婚专栏给家长们自由寻找和免费刊登征婚启事，成不成看缘分，至少还可以这这里认识更多的猫友^^</view>
					<view v-if="type == 4">NABERCAT是一个专注猫咪互联网+品牌。通过和铲屎官的合作，把自家出生的健康猫咪带给大家。</view>
				</view>
			</view> -->
			<!-- 购猫服务 -->
			<block v-if="type == 4">
				<view class="title-txt">购猫服务</view>
				<view class="buy-cat-fuwu">
					<view class="buy-cat-fuwu-item">
						<view class="fuwu-title">10天担保</view>
						<view>10天包猫瘟</view>
					</view>
					<view class="buy-cat-fuwu-item">
						<view class="fuwu-title">自家生</view>
						<view>铲屎官家里出生的猫咪，更放心</view>
					</view>
					<view class="buy-cat-fuwu-item">
						<view class="fuwu-title">品牌担保</view>
						<view>
							NABERCAT
							<text style="color: #3097F9;">10天担保交易</text>
							，确认猫咪健康后再交付款项，风险可控。
						</view>
					</view>
					<view class="buy-cat-fuwu-item">
						<view class="fuwu-title">无差价</view>
						<view>没有中间商赚取差价，更省钱。</view>
					</view>
					<view class="buy-cat-fuwu-item">
						<view class="fuwu-title">分期付款</view>
						<view>同时支持花呗、信用卡、微信、支付宝、银行转账等。</view>
					</view>
					<view class="buy-cat-fuwu-item">
						<view class="fuwu-title">全国配送</view>
						<view>
							汽运，空运且
							<text style="color: #3097F9;">运费低</text>
							。
						</view>
					</view>
					<view class="buy-cat-fuwu-item">
						<view class="fuwu-title">VIP价</view>
						<view>
							猫用品，猫粮，玩具，洗澡，寄养等服务
							<text style="color: #3097F9;">终身VIP专享价</text>
							，NABER CAT全国连锁店通用。
						</view>
					</view>
					<view class="buy-cat-fuwu-item">
						<view class="fuwu-title">弃养不担心</view>
						<view>
							因个人原因以后无法养它，NABER CAT
							<text style="color: #3097F9;">免费无偿</text>
							帮您找到好主人(猫咪健康为前提)
						</view>
					</view>
					<view class="buy-cat-fuwu-item">
						<view class="fuwu-title">治病VIP</view>
						<view>凭猫咪身份证号，通过NABER CAT去指定合作医院享受折扣10-20%(仅从NABER CAT购买的猫才有身份证哦)</view>
					</view>
					<view class="buy-cat-fuwu-item">
						<view class="fuwu-title">新手养猫免费指导</view>
						<view>
							添加NABER CAT官方客服微信号，
							<text style="color: #3097F9;">24小时免费</text>
							指导您如何养好猫。
						</view>
					</view>
					<view class="buy-cat-fuwu-item">
						<view class="fuwu-title">免费兽医咨询</view>
						<view>
							NABER CAT消费客户可通过联系
							<text style="color: #3097F9;">官方客服免费咨询</text>
						</view>
					</view>
				</view>
			</block>
		</view>
		<!-- 空白 -->
		<view style="width: 100%;height: 20rpx;background-color: #EFEFEF;" v-if="detail.comments.length > 0"></view>
		<!-- 评论 -->
		<view class="detail-comment" v-if="detail.comments.length > 0">
			<view class="comment-title">全部评论({{ detail.list.comment }})</view>
			<view class="comment-list">
				<view class="comment-item" v-for="(item, i) in detail.comments" :key="item.id">
					<image :src="item.headimgurl" mode="aspectFill" class="comment-head"></image>
					<view class="commentnickname">
						<view class="comment-name">{{ item.nickname }}</view>
						<view>{{ item.content }}</view>
					</view>
					<view class="comment-time">{{ item.time }}</view>
				</view>
			</view>
		</view>
		<view style="height: 160rpx"></view>
		<!-- 底部操作 -->
		<!-- <sellCatBottom ref="sellCatBottom" v-if="type == 4 && active === ''" :detail="detail" @bindForwarding="bindForwarding" @like="bindLike" @confirm="confirm" /> -->
		<blindDateBottom
			ref="blindDateBottom"
			:active="active"
			:detail="detail"
			:type="type"
			@bindForwarding="bindForwarding"
			@like="bindLike"
			@confirm="confirm"
			@back="bindBack"
			@paySuccess="paySuccess"
		/>
		<!-- 弹出层 -->
		<uni-popup ref="popup" type="bottom">
			<view class="popup-list">
				<button
					class="popup-item"
					open-type="share"
					@click="
						() => {
							this.$refs.popup.close();
						}
					"
				>
					转发给好友
				</button>
				<view class="popup-item" v-if="type == 4" @click="bindCanvas">生成海报</view>
				<view class="popup-item" v-if="type == 2" @click="bindCanvasXq">生成海报</view>
			</view>
		</uni-popup>
		<!-- 生成海报(邻家的猫) -->
		<posters :qrCode="codeImg" @saveImageToPhotosAlbum="saveImageToPhotosAlbum" ref="hbPosters" />
		<canvas class="posters" canvas-id="firstCanvas" id="firstCanvas"></canvas>
		<!-- 生成海报(猫咪相亲) -->
		<div class="blind-canvas-mask" v-show="xqHbShow" @touchmove.stop.prevent="() => {}"></div>
		<div class="blind-canvas" v-show="xqHbShow">
			<icon class="close" @click="closeXqHb"></icon>
			<icon class="dowmLoad" @click="saveImageToPhotosAlbum"></icon>
			<image v-show="poster" class="blinds" :src="poster" mode=""></image>
			<canvas v-show="!poster" class="blinds" canvas-id="blindCanvas" id="blindCanvas" style="opacity: 0;"></canvas>
		</div>
	</view>
</template>

<script>
const app = getApp();
import posters from './components/posters/index.vue';
import sellCatBottom from '@/wxcomponents/sellCat/bottom.vue';
import blindDateBottom from '@/wxcomponents/blindDate/bottom.vue';
import { formatTimeSecond, formatTime } from '@/util/time.js';
import {
	Xfeedback,
	profile,
	xProfiles,
	cComment,
	clike,
	addXComment,
	nabercatXLike,
	xCollect,
	xChangePrice,
	xOffcat,
	qrcode,
	backXCode,
	login,
	chatClick,
	lifePage,
	xWmedia,
	xShare
} from '@/api/index.js';
export default {
	components: {
		posters,
		sellCatBottom,
		blindDateBottom
	},
	data() {
		return {
			active: '',
			id: '',
			type: 2, //2:相亲交友 4：邻家的猫
			openid: '',
			IMG_URL: app.globalData.IMG_URL,
			feedBackList: [],
			detail: {}, //详情信息
			content: '', //评论
			qrTop: 10000,
			price: 0,
			mainImg: '', // 主图
			bgImg: '', //背景图
			codeImg: '', //小程序码
			poster: '', // 海报图片
			bannerIndex: 0,
			wmedia: {}, // 公众号信息
			xq: {
				// 相亲海报
				bg: '', // 背景
				imgTopAiXin: '', // 顶部爱心
				imgBottomAiXin: '', // 底部爱心
				imgDongHua: '', // 底部图片
				bgBaidi: '', // 白底背景
				mainImg: '' //商品图片
			},
			xqHbShow: false
		};
	},
	methods: {
		// 跳转直播
		onLive() {
			uni.navigateTo({
				url: `plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=${this.detail.list.roomid}`
			});
		},
		// 免费拿
		bindBack() {
			uni.navigateTo({
				url: `/pages/freeToBuy/freeToBuyDetail?id=${this.id}`
			});
		},
		// 获取轮播图索引
		bindDots(val) {
			this.bannerIndex = val.detail.current;
		},
		// 跳转webview
		bindWebView() {
			if (this.detail.list.bonus_link === '' || !this.detail.list.bonus_link) {
				return false;
			}
			uni.navigateTo({
				url: `/pages/webView/webView?url=${this.detail.list.bonus_link}`
			});
		},
		// 跳转详情
		bindDetail(item) {
			uni.navigateTo({
				url: `/pages/detail/detail?id=${item.id}&type=${3}&t=${2}`
			});
		},
		// 联系客服点击率
		async chatClick() {
			const res = await chatClick({
				openid: app.globalData.openid
			});
			console.log(res);
		},
		// 获取公众号信息
		async xWmedia() {
			const res = await xWmedia({
				id: this.id
			});
			this.wmedia = res;
		},
		// 跳转相亲公众号
		bindWmedia() {
			uni.navigateTo({
				url: `/pages/webView/webView?url=${this.wmedia.url}`
			});
		},
		// 通过小程序码获取商品id
		backXCode: function(id, type) {
			uni.login({
				provider: 'weixin',
				success: loginRes => {
					// 获取openid
					login({
						jscode: loginRes.code,
						haibao_id: id
					}).then(res => {
						backXCode({
							id: id,
							openid: res.openid
						}).then(res => {
							this.id = res;
							if (type == 2) {
								this.profile(); //相亲交友
								this.xWmedia();
							} else {
								this.xProfiles(); //邻家的猫
							}
						});
					});
				}
			});
		},
		// 买家秀
		lifePage() {
			lifePage({
				page: 1,
				keywords: '',
				openid: app.globalData.openid,
				type: 2
			}).then(res => {
				this.feedBackList = res.list;
			});
		},
		// 生成海报-小程序码
		qrcode() {
			qrcode({
				openid: app.globalData.openid,
				goods_id: this.id,
				type: this.type
			}).then(res => {
				uni.getImageInfo({
					src: res,
					success: resi => {
						this.codeImg = resi.path;
					}
				});
			});
		},
		// 生成海报-主图(邻家的猫)
		getImageInfoMain() {
			let url = '';
			if (this.detail.img.length > 0) {
				url = `https://nabercat.oss-cn-hangzhou.aliyuncs.com/${this.detail.img[0].img_url}?x-oss-process=image/resize,m_pad,h_65,w_95,color_F8F8F8`;
			} else {
				url = `${this.detail.video.cover}`;
			}
			uni.getImageInfo({
				src: url,
				success: res => {
					this.mainImg = res.path;
				}
			});
		},
		// 背景图(邻家的猫)
		getImageInfoBg() {
			uni.getImageInfo({
				src: `https://nabercat.oss-cn-hangzhou.aliyuncs.com/acat-xcx/haibaobeijing.png`,
				success: res => {
					this.bgImg = res.path;
				}
			});
		},
		// 画布(邻家的猫)
		bindCanvas() {
			// 海报弹出层
			this.$refs.hbPosters.open();
			uni.showLoading({
				title: '正在生成',
				mask: true
			});
			let ctx = uni.createCanvasContext('firstCanvas');
			ctx.drawImage(this.bgImg, 0, 0, 375, 550); //背景图
			ctx.setFontSize(31);
			ctx.setFillStyle('#171717');
			ctx.fillText('NABERCAT', 30, 60);
			ctx.setFontSize(14);
			ctx.setFillStyle('#636363');
			ctx.fillText('买猫就选nabercat，更放心', 30, 82);
			ctx.setFontSize(12);
			ctx.setFillStyle('#999999');
			ctx.fillText('长按二维码进入 NABERCAT 小程序', 91, 375);
			ctx.setFontSize(12);
			ctx.setFillStyle('#999999');
			ctx.fillText('立即查看TA的详细信息', 120, 400);
			ctx.drawImage(this.mainImg, 81, 435, 95, 65); //主图图片
			// this.roundRectImg(ctx, 81, 435, 95, 65, 10, this.mainImg)
			ctx.setFontSize(16);
			ctx.setFillStyle('#171717');
			ctx.fillText(this.detail.list.name, 186, 451);
			ctx.setFontSize(12);
			ctx.setFillStyle('#666666');
			ctx.fillText(`${this.detail.list.birth} ${this.detail.list.sex == 1 ? 'DD' : 'MM'}`, 186, 472);
			ctx.beginPath();
			// ctx.rect(186, 482, 50, 18);
			// ctx.setFillStyle('#FED5D8');
			this.roundRect(ctx, 186, 482, 50, 18, 3, '#FED5D8');
			ctx.fill();
			ctx.setFontSize(10);
			ctx.setFillStyle('#FA3B49');
			ctx.fillText(this.detail.list.cons + '座', 196, 495);
			ctx.beginPath();
			// ctx.rect(244, 482, 40, 18);
			// ctx.setFillStyle('#C0DFFD');
			this.roundRect(ctx, 244, 482, 40, 18, 3, '#C0DFFD');
			ctx.fill();
			ctx.setFontSize(10);
			ctx.setFillStyle('#0077EA');
			ctx.fillText(this.detail.list.temper, 254, 495);
			ctx.save();
			ctx.beginPath();
			ctx.arc(188, 232, 112, 0, Math.PI * 2, false);
			ctx.clip();
			ctx.drawImage(this.codeImg, 76, 120, 224, 224); //小程序码
			ctx.restore();
			ctx.draw();
			this.$refs.popup.close();
			setTimeout(() => {
				//下面的13以及减26推测是因为在写样式的时候写了固定的zoom: 50%而没有用像素比缩放导致的黑边，所以在生成时进行了适当的缩小生成，这个大家可以自行尝试
				uni.canvasToTempFilePath({
					canvasId: 'firstCanvas',
					x: 0,
					y: 0,
					width: 3000,
					height: 4400,
					destWidth: 3000,
					destHeight: 4400,
					success: res => {
						uni.hideLoading();
						this.poster = res.tempFilePath;
					}
				});
			}, 200);
		},
		// 背景图（相亲）
		getXqBg() {
			uni.getImageInfo({
				src: `https://nabercat.oss-cn-hangzhou.aliyuncs.com/acat-xcx/xq-haibao-beij.png`,
				success: res => {
					this.xq.bg = res.path;
				}
			});
		},
		// 底部爱心（相亲）
		getXqTopAiXin() {
			uni.getImageInfo({
				src: `https://nabercat.oss-cn-hangzhou.aliyuncs.com/acat-xcx/xq-haibao-aixin.png`,
				success: res => {
					this.xq.imgBottomAiXin = res.path;
				}
			});
		},
		// 顶部爱心（相亲）
		getXqBottomAiXin() {
			uni.getImageInfo({
				src: `https://nabercat.oss-cn-hangzhou.aliyuncs.com/acat-xcx/xq-haibao-aixin.png`,
				success: res => {
					this.xq.imgTopAiXin = res.path;
				}
			});
		},
		// 底部图标（相亲）
		getXqDongHua() {
			uni.getImageInfo({
				src: `https://nabercat.oss-cn-hangzhou.aliyuncs.com/acat-xcx/xq-haibao-dh.png`,
				success: res => {
					this.xq.imgDongHua = res.path;
				}
			});
		},
		// 白底背景（相亲）
		getXqBaidi() {
			uni.getImageInfo({
				src: `https://nabercat.oss-cn-hangzhou.aliyuncs.com/acat-xcx/xq-haibai-baidi.png`,
				success: res => {
					this.xq.bgBaidi = res.path;
				}
			});
		},
		// 生成海报-主图(相亲)
		getImageInfoMainXq() {
			let url = '';
			if (this.detail.img.length > 0) {
				//crop
				url = `https://nabercat.oss-cn-hangzhou.aliyuncs.com/${this.detail.img[0].img_url}?x-oss-process=image/resize,m_fill,h_220,w_244,color_FED5D8`;
			} else {
				url = `${this.detail.video.cover}`;
			}
			uni.getImageInfo({
				src: url,
				success: res => {
					this.xq.mainImg = res.path;
				}
			});
		},
		// 画布生成海报（相亲）
		bindCanvasXq() {
			uni.showLoading({
				title: '正在生成',
				mask: true
			});
			this.poster = '';
			let ctx = uni.createCanvasContext('blindCanvas');
			//背景图
			ctx.drawImage(this.xq.bg, 0, 0, 280, 496);
			// NABERCAT 相亲会
			ctx.beginPath();
			ctx.font = 'bold 18px Arial-Black, Arial';
			ctx.setFillStyle('#FFFFFF');
			ctx.fillText('NABERCAT 猫咪相亲', 50, 35);
			ctx.fill();
			// 买猫就选nabercat，更放心
			ctx.beginPath();
			ctx.font = '11px PingFangSC-Regular, PingFang SC';
			ctx.setFillStyle('#FFFFFF');
			ctx.fillText('买猫就选nabercat，更放心', 69, 55);
			ctx.fill();
			// 顶部爱心图标
			ctx.drawImage(this.xq.imgBottomAiXin, 208, 42, 24, 21);
			// 白底背景
			ctx.drawImage(this.xq.bgBaidi, 18, 88, 244, 357);
			// 商品图片
			this.roundRectImg(ctx, 18, 88, 244, 220, 3, this.xq.mainImg);
			// 宠物名字
			ctx.setFontSize(12);
			ctx.setFillStyle('#333333');
			ctx.fillText(this.detail.list.name.substr(0, 3), 44, 328);
			// 星座
			ctx.beginPath();
			this.roundRect(ctx, 90, 316, 38, 14, 3, '#FED5D8');
			ctx.fill();
			ctx.setFontSize(8);
			ctx.setFillStyle('#FA3B49');
			ctx.fillText(this.detail.list.cons + '座', 97, 325.5);
			// 性格
			ctx.beginPath();
			this.roundRect(ctx, 132, 316, 30, 13.5, 3, '#C0DFFD');
			ctx.fill();
			ctx.setFontSize(8);
			ctx.setFillStyle('#0077EA');
			ctx.fillText(this.detail.list.temper, 139, 325.5);
			// 生日性别
			ctx.setFontSize(9);
			ctx.setFillStyle('#333333');
			ctx.fillText(`${this.detail.list.birth.split('-').join('/')} ${this.detail.list.sex == 1 ? '哥哥' : '妹妹'}`, 44, 344);
			// 长按二维码进入 NABERCAT 小程序
			ctx.setFontSize(8);
			ctx.setFillStyle('#393939');
			ctx.fillText('长按二维码进入 NABERCAT 小程序', 38, 395);
			// 立即查看TA的详细信息
			ctx.setFontSize(8);
			ctx.setFillStyle('#393939');
			ctx.fillText('立即查看TA的详细信息', 82, 408);
			// 底部动画图
			ctx.drawImage(this.xq.imgDongHua, 18, 406, 54, 39);
			// 小程序码
			ctx.drawImage(this.codeImg, 178, 371, 60, 60);
			// 底部爱心
			ctx.drawImage(this.xq.imgBottomAiXin, 181, 416, 95, 80);
			ctx.draw();
			this.xqHbShow = true;
			this.$refs.popup.close();
			setTimeout(() => {
				//下面的13以及减26推测是因为在写样式的时候写了固定的zoom: 50%而没有用像素比缩放导致的黑边，所以在生成时进行了适当的缩小生成，这个大家可以自行尝试
				uni.canvasToTempFilePath({
					canvasId: 'blindCanvas',
					x: 0,
					y: 0,
					width: 280,
					height: 496,
					destWidth: (280 * 750 * 2) / wx.getSystemInfoSync().windowWidth,
					destHeight: (496 * 750 * 2) / wx.getSystemInfoSync().windowWidth,
					success: res => {
						uni.hideLoading();
						this.poster = res.tempFilePath;
					}
				});
			}, 200);
		},
		// 关闭相亲海报
		closeXqHb() {
			this.xqHbShow = false;
		},
		// 绘制圆角矩形
		roundRect(ctx, x, y, w, h, r, c) {
			if (w < 2 * r) {
				r = w / 2;
			}
			if (h < 2 * r) {
				r = h / 2;
			}
			ctx.beginPath();
			ctx.fillStyle = c;
			ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5);
			ctx.moveTo(x + r, y);
			ctx.lineTo(x + w - r, y);
			ctx.lineTo(x + w, y + r);
			ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2);
			ctx.lineTo(x + w, y + h - r);
			ctx.lineTo(x + w - r, y + h);
			ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5);
			ctx.lineTo(x + r, y + h);
			ctx.lineTo(x, y + h - r);
			ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI);
			ctx.lineTo(x, y + r);
			ctx.lineTo(x + r, y);
			ctx.fill();
			ctx.closePath();
		},

		// 绘制圆角图片
		roundRectImg(ctx, bg_x, bg_y, bg_w, bg_h, bg_r, img) {
			ctx.save();
			ctx.beginPath();
			ctx.arc(bg_x + bg_r, bg_y + bg_r, bg_r, Math.PI, Math.PI * 1.5);
			ctx.arc(bg_x + bg_w - bg_r, bg_y + bg_r, bg_r, Math.PI * 1.5, Math.PI * 2);
			ctx.arc(bg_x + bg_w - bg_r, bg_y + bg_h - bg_r, bg_r, 0, Math.PI * 0.5);
			ctx.arc(bg_x + bg_r, bg_y + bg_h - bg_r, bg_r, Math.PI * 0.5, Math.PI);
			ctx.clip();
			ctx.drawImage(img, bg_x, bg_y, bg_w, bg_h);
			ctx.restore();
		},

		// 保存海报
		saveImageToPhotosAlbum: function() {
			uni.saveImageToPhotosAlbum({
				filePath: this.poster,
				success: e => {
					uni.showToast({
						title: '保存成功',
						duration: 2000
					});
					this.$refs.hbPosters.close();
					this.xqHbShow = false;
				},
				fail: err => {
					console.log(err);
				}
			});
		},
		// 长按报错二维码
		saveImage() {
			uni.previewImage({
				urls: ['https://nabercat.oss-cn-hangzhou.aliyuncs.com/acat-xcx/ljdm-code99.jpg'],
				current: 0
			});
		},
		// 调整到发布页面
		catBlindDate: function() {
			let type = this.type == 2 ? 1 : 2;
			uni.navigateTo({
				url: `/pages/buyRelease/buyRelease?type=${type}`
			});
		},

		// 买家反馈
		Xfeedback: function() {
			Xfeedback().then(res => {
				this.feedBackList = res;
				console.log(res);
			});
		},

		// 相亲交友详情
		profile: function() {
			profile({
				openid: app.globalData.openid,
				id: this.id
			}).then(res => {
				console.log(res);
				res.list.time = formatTimeSecond(res.list.time); //发布时间
				res.list.birth = formatTime(res.list.birth); //生日
				// res.list.content = res.list.note
				// res.info = res.list
				res.comments.forEach(val => {
					//评论
					val.time = formatTimeSecond(val.time);
				});
				this.detail = res;
				this.price = res.list.price;
				// 画布转本地图片
				this.getXqBg();
				this.getXqTopAiXin();
				this.getXqBottomAiXin();
				this.getXqDongHua();
				this.getXqBaidi();
				this.getImageInfoMainXq();
				this.qrcode();
			});
		},

		// 邻家的猫详情
		xProfiles: function() {
			xProfiles({
				openid: app.globalData.openid,
				id: this.id
			}).then(res => {
				res.list.time = formatTimeSecond(res.list.time); //发布时间
				res.list.birth = formatTime(res.list.birth); //生日
				res.comments.forEach(val => {
					//评论
					val.time = formatTimeSecond(val.time);
				});
				this.detail = res;
				this.price = res.list.price;
				this.getImageInfoMain();
				this.getImageInfoBg();
				this.qrcode();
			});
		},

		// 相亲评论
		cComment: function(content) {
			cComment({
				openid: app.globalData.openid,
				id: this.id,
				content: content
			}).then(res => {
				if (res == 1) {
					uni.showToast({
						title: '评论成功，待审核',
						mask: true,
						duration: 2000,
						icon: 'none'
					});
					this.$refs.blindDateBottom.input = '';
					this.profile();
				}
			});
		},

		// 邻家的猫评论
		addXComment: function(content) {
			addXComment({
				openid: app.globalData.openid,
				id: this.id,
				content: content,
				type: 2
			}).then(res => {
				uni.showToast({
					title: '评论成功，待审核',
					mask: true,
					duration: 2000,
					icon: 'none'
				});
				this.$refs.sellCatBottom.input = '';
				this.xProfiles();
			});
		},

		//相亲点赞
		clike: function() {
			clike({
				openid: app.globalData.openid,
				id: this.id
			}).then(res => {
				if (res == 1) {
					uni.showToast({
						title: '点赞成功',
						duration: 2000
					});
					this.profile();
				}
			});
		},

		// 邻家的猫点赞
		nabercatXLike: function() {
			nabercatXLike({
				openid: app.globalData.openid,
				id: this.id
			}).then(res => {
				if (res == 1) {
					uni.showToast({
						title: '点赞成功',
						duration: 2000
					});
					this.xProfiles();
				}
			});
		},

		// 点赞
		bindLike: function() {
			if (!app.userIdentity()) {
				uni.navigateTo({
					url: '/pages/login/login'
				});
				return false;
			}
			if (this.type == 2) {
				this.clike(); //相亲点赞
			} else {
				this.nabercatXLike(); //邻家的猫点赞
			}
		},

		// 发送评论
		confirm: function(content) {
			if (!app.userIdentity()) {
				uni.navigateTo({
					url: '/pages/login/login'
				});
				return false;
			}
			if (this.type == 2) {
				this.cComment(content); //相亲评论
			} else {
				this.addXComment(content); //邻家的猫评论
			}
		},

		// 收藏
		xCollect: function() {
			if (!app.userIdentity()) {
				uni.navigateTo({
					url: '/pages/login/login'
				});
				return false;
			}
			xCollect({
				openid: app.globalData.openid,
				id: this.id
			}).then(res => {
				uni.showToast({
					title: '收藏成功',
					duration: 2000
				});
			});
		},

		// 下架
		undercarriage: function() {
			uni.showModal({
				title: '提示',
				content: '你确定要下架么？',
				success: res => {
					if (res.confirm) {
						xOffcat({
							id: this.id
						}).then(res => {
							if (res == 1) {
								uni.showToast({
									title: '已下架',
									duration: 2000
								});
							}
						});
					}
				}
			});
		},

		setClipboardData: function() {
			// uni.pageScrollTo({
			// 	scrollTop: this.qrTop,
			// 	duration: 300
			// });
			this.chatClick();
		},

		// 复制微信号
		wxCopy: function(e, text) {
			uni.setClipboardData({
				data: e,
				success: function() {
					uni.showToast({
						title: `${text}复制成功`
					});
				}
			});
		},

		// 转发
		bindForwarding: function() {
			if (!app.userIdentity()) {
				uni.navigateTo({
					url: '/pages/login/login'
				});
				return false;
			}
			this.$refs.popup.open('bottom');
		},

		// 修改价格
		revisePrice: function() {
			uni.showModal({
				title: '提示',
				content: '你确定要修改价格么？',
				success: res => {
					if (res.confirm) {
						xChangePrice({
							id: this.id,
							price: this.detail.list.price
						}).then(res => {
							if (res == 1) {
								uni.showToast({
									title: '价格修改成功',
									duration: 2000
								});
								if (this.type == 2) {
									this.profile(); //相亲交友
								} else {
									this.xProfiles(); //邻家的猫
								}
							} else {
								this.detail.list.price = this.price;
							}
						});
					} else {
						this.detail.list.price = this.price;
					}
				}
			});
		},

		revisePriceBlur: function() {
			this.detail.list.price = this.price;
		},

		// 放大查看图片
		lookImg: function(index, num) {
			let arr = [];
			if (num == 1) {
				this.detail.img.forEach(val => {
					arr.push(this.IMG_URL + val.img_url);
				});
			} else {
				this.feedBackList.forEach(val => {
					arr.push('https://admin.nabercat.com/Public/admin/images/feedback/' + val.img_url);
				});
			}
			uni.previewImage({
				urls: arr,
				current: index
			});
		},
		lookBloodImg(src) {
			uni.previewImage({
				urls: [src],
				current: 0
			});
		},

		// 保存视频
		saveVideo: function(url) {
			uni.showModal({
				content: '保存视频',
				success: res => {
					if (res.confirm) {
						uni.showLoading({
							title: '保存视频中...'
						});
						uni.downloadFile({
							url: url,
							success: res1 => {
								if (res1.statusCode === 200) {
									uni.hideLoading();
									uni.saveVideoToPhotosAlbum({
										filePath: res1.tempFilePath,
										success: function() {
											uni.hideLoading();
										},
										fail: err => {
											uni.getSetting({
												success(res2) {
													if (!res2.authSetting['scope.writePhotosAlbum']) {
														uni.showModal({
															title: '提示',
															content: '授权保存到相册',
															success: resp => {
																if (resp.confirm) {
																	uni.openSetting({
																		success: resPhoto => {
																			console.log(resPhoto.authSetting);
																		},
																		fail() {}
																	});
																}
															}
														});
													}
												}
											});
										}
									});
								}
							}
						});
					}
				}
			});
		},
		// 分享接口
		async xShare(openid) {
			const res = await xShare({
				type: this.type == 2 ? 4 : 3,
				goods_id: this.id,
				openid: openid,
				openid_in: app.globalData.openid
			});
		},
		paySuccess() {
			this.profile(); //相亲交友
			this.xWmedia();
		}
	},

	onLoad(options) {
		console.log(options);
		this.openid = uni.getStorageSync('openid');
		this.active = options.active || '';
		// this.Xfeedback(); // 买家反馈
		this.lifePage(); // 买家秀
		if (options.scene) {
			// 海报进入的页面
			const scene = decodeURIComponent(options.scene);
			this.type = Number(scene.split(',')[1]);
			if (app.globalData.openid) {
				this.backXCode(Number(scene.split(',')[0]), Number(scene.split(',')[1]));
			} else {
				app.getOpenId().then(res => {
					this.backXCode(Number(scene.split(',')[0]), Number(scene.split(',')[1]));
				});
			}
		} else {
			this.id = options.id;
			this.type = options.type;
			if (app.globalData.openid) {
				if (options.type == 2) {
					this.profile(); //相亲交友
					this.xWmedia();
				} else {
					this.xProfiles(); //邻家的猫
				}
				// 分享接口
				if (options.openid) {
					this.xShare(options.openid);
				}
			} else {
				app.getOpenId().then(res => {
					if (options.type == 2) {
						this.profile(); //相亲交友
						this.xWmedia();
					} else {
						this.xProfiles(); //邻家的猫
					}
					// 分享接口
					if (options.openid) {
						this.xShare(options.openid);
					}
				});
			}
		}
	},
	onShow() {
		this.openid = uni.getStorageSync('openid');
		if (!this.codeImg && this.codeImg === '') {
			this.qrcode();
		}
		if (app.globalData.openid && this.type) {
			if (this.type == 4) {
				this.xProfiles(); //邻家的猫
			}
		}
	},
	// 分享
	onShareAppMessage() {
		return {
			title: 'nabercat-life',
			path: `/pages/buyDetail/buyDetail?id=${this.id}&type=${this.type}&openid=${app.globalData.openid}`
		};
	}
};
</script>

<style scoped lang="scss">
@mixin itemFlex {
	display: flex;
	align-items: center;
}

.wx-message {
	height: 132rpx;
	padding: 16rpx 26rpx 32rpx;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	position: relative;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 90;
	background: #ffffff;

	.wx-head {
		width: 88rpx;
		height: 88rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.wx-nickname {
		flex: 1;
		color: #999999;
		font-size: 22rpx;

		.wx-name {
			font-size: 28rpx;
			color: #333333;
			font-weight: 600;
			margin-bottom: 4rpx;
		}
	}

	.img-download {
		position: absolute;
		right: 26rpx;
		top: 50%;
		transform: translateY(-50%);
		width: 128rpx;
		height: 56rpx;
		line-height: 56rpx;
		text-align: center;
		background: #fa8384;
		border-radius: 8rpx;
		color: #ffffff;
		font-size: 28rpx;
	}
}

.padding-box {
	padding: 0 30rpx;
	.buy-detail-banner {
		width: 100%;
		height: 360rpx;
		margin-bottom: 60rpx;
		position: relative;
		border-radius: 8rpx;
		.dots {
			position: absolute;
			bottom: -32rpx;
			left: 50%;
			transform: translateX(-50%);
			display: flex;
			.dots-item {
				width: 12rpx;
				height: 12rpx;
				border-radius: 50%;
				background: #d8d8d8;
				margin-right: 20rpx;
				&:nth-last-of-type(1) {
					margin-right: 0;
				}
			}
			.dots-item-active {
				background: #333333;
			}
		}
		.banner-live {
			position: absolute;
			right: 20rpx;
			bottom: 16rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: 24rpx;
			font-weight: 600;
			color: #fa8384;
			.icon-BFTB {
				width: 40rpx;
				height: 40rpx;
				background: url(https://nabercat.oss-cn-hangzhou.aliyuncs.com/acat-xcx/BrowserPreview_tmp.gif) no-repeat;
				background-size: cover;
				border-radius: 50%;
			}
		}
		/* 
		 <view class="banner-live">
		 	<icon class="icon-BFTB"></icon>
		 	<text>直播</text>
		 </view>
		 */

		.swiper {
			width: 100%;
			height: 100%;
			border-radius: 8rpx;
			.swiper-item {
				width: 100%;
				height: 100%;
				background-color: #f8f8f8;
				border-radius: 8rpx;
			}
		}
	}
	.cat-name {
		display: flex;
		align-items: center;
		margin-bottom: 8rpx;
		& > text:nth-of-type(1) {
			color: #333333;
			font-size: 40rpx;
			margin-right: 16rpx;
		}
		& > text:nth-of-type(2) {
			padding: 4rpx 16rpx;
			background: rgba(250, 131, 132, 0.2);
			color: #ff6465;
			font-size: 24rpx;
			border-radius: 8rpx;
		}
	}
	.cat-describe {
		color: #999999;
		font-size: 26rpx;
		padding-bottom: 20rpx;
		border-bottom: 2rpx solid #f5f5f5;
		box-sizing: border-box;
		margin-bottom: 32rpx;
	}
	.title-txt {
		color: #333333;
		font-size: 40rpx;
		margin-bottom: 24rpx;
		font-weight: 500;
	}
	.cat-msg {
		display: flex;
		flex-wrap: wrap;
		font-size: 26rpx;
		margin-bottom: 40rpx;
		.cat-msg-item {
			width: 50%;
			margin-bottom: 12rpx;
			& > text {
				color: #999999;
			}
		}
	}
	.blood {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 40rpx;
		.blood-img {
			width: 260rpx;
			height: 236rpx;
			background: #d8d8d8;
			border-radius: 8rpx;
			position: relative;
			& > image {
				width: 260rpx;
				height: 236rpx;
				border-radius: 8rpx;
			}
			& > .icon-father {
				width: 44rpx;
				height: 44rpx;
				background: url(https://nabercat.oss-cn-hangzhou.aliyuncs.com/acat-xcx/icon-sex-nan.png) no-repeat;
				background-size: cover;
				position: absolute;
				top: 0;
				right: 0;
			}
			& > .icon-mother {
				width: 44rpx;
				height: 44rpx;
				background: url(https://nabercat.oss-cn-hangzhou.aliyuncs.com/acat-xcx/icon-sex-nv.png) no-repeat;
				background-size: cover;
				position: absolute;
				top: 0;
				left: 0;
			}
		}
		.blood-zj-img {
			width: 158rpx;
			height: 48rpx;
		}
	}

	.buy-lianxi {
		font-size: 28rpx;
		margin-bottom: 40rpx;
		.lx_1 {
			color: #666666;
			line-height: 40rpx;
		}
		.lx_2 {
			color: #333333;
		}
		.lx_3 {
			display: inline-block;
			width: 40px;
			height: 16px;
			background: #fa8384;
			border-radius: 4px;
			text-align: center;
			line-height: 16px;
			color: #ffffff;
			margin: 0 12rpx;
		}
		.lx_4 {
			color: #3097f9;
		}
	}
	.tz-gzh {
		margin-bottom: 40rpx;
		width: 100%;
		height: 136rpx;
		padding: 24rpx 30rpx 24rpx 20rpx;
		box-sizing: border-box;
		border: 2rpx solid rgba(250, 131, 132, 0.48);
		border-radius: 8rpx;
		.tz-top {
			display: flex;
			align-items: center;
			margin-bottom: 8rpx;
			.icon-lj {
				width: 24rpx;
				height: 24rpx;
				background: url(https://nabercat.oss-cn-hangzhou.aliyuncs.com/acat-xcx/icon-lianjiesz.png) no-repeat;
				background-size: cover;
				margin-right: 4rpx;
			}
			& > text {
				flex: 1;
				font-size: 28rpx;
				font-weight: 400;
				color: #333333;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
		}
		.tz-bot {
			font-size: 24rpx;
			color: #999999;
		}
	}
	.get-hongbao {
		width: 100%;
		height: 180rpx;
		background: url(https://nabercat.oss-cn-hangzhou.aliyuncs.com/acat-xcx/hongbaolunqu.png) no-repeat;
		background-size: cover;
		padding: 102rpx 28rpx 0;
		box-sizing: border-box;
		margin-bottom: 40rpx;
		font-size: 24rpx;
		color: #ffffff;
		font-weight: 600;
		letter-spacing: 2rpx;
		& > text:nth-of-type(1) {
			font-size: 40rpx;
			color: #ffeb40;
		}
		& > text:nth-of-type(2) {
			font-size: 24rpx;
			color: #ffeb40;
		}
	}
	.buyer-feedback {
		width: 100%;
		height: 236rpx;
		display: flex;
		margin-bottom: 40rpx;
		.buyer-feedback-item {
			width: 360rpx;
			height: 100%;
			flex-shrink: 0;
			margin-right: 20rpx;
			border-radius: 8rpx;
			overflow: hidden;
			position: relative;
			& > image {
				width: 100%;
				height: 100%;
			}
			& > text {
				position: absolute;
				left: 0;
				bottom: 0;
				width: 100%;
				padding: 14rpx 12rpx 14rpx 24rpx;
				box-sizing: border-box;
				background-color: rgba(16, 21, 23, 0.7);
				color: #ffffff;
				font-size: 24rpx;
				text-align: center;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
				word-break: break-all;
			}
		}
	}

	.brand-info-box {
		width: 100%;
		height: 200rpx;
		margin-bottom: 40rpx;
		// height: 224rpx;
		// padding: 0 71rpx 0 54rpx;
		// box-sizing: border-box;
		// background: #e9f1ea;
		// border-radius: 24rpx;
		// display: flex;
		// align-items: center;
		// margin-bottom: 40rpx;

		.brand-info-box-left {
			width: 110rpx;
			height: 110rpx;
			border-radius: 50%;
			margin-right: 16rpx;
		}

		.brand-info-box-right {
			flex: 1;
			color: #333333;
			font-size: 22rpx;

			& > view:nth-of-type(1) {
				font-size: 24rpx;
				margin-bottom: 8rpx;
				font-weight: 600;
			}
		}
	}
	.buy-cat-fuwu {
		margin-bottom: 44rpx;
		.buy-cat-fuwu-item {
			margin-bottom: 20rpx;
			font-size: 24rpx;
			color: #666666;
			display: flex;
			align-items: flex-start;
			letter-spacing: 2rpx;
			.fuwu-title {
				width: 120rpx;
				padding: 4rpx 12rpx;
				box-sizing: border-box;
				background: rgba(250, 131, 132, 0.15);
				border-radius: 4px;
				color: #fa8384;
				text-align: center;
				margin-right: 24rpx;
				flex-shrink: 0;
				letter-spacing: 0;
			}
		}
	}
	.qr-img {
		width: 250rpx;
		height: 250rpx;
		display: block;
		margin: 0 auto 12rpx;
	}
	.qrcode-txt {
		color: #333333;
		font-size: 24rpx;
		text-align: center;
		margin-bottom: 16rpx;
	}
	.ke_fu_img {
		width: 106rpx;
		height: 106rpx;
		background-color: #ffffff;
		box-shadow: 0px 4rpx 8rpx 0px rgba(102, 102, 102, 0.2);
		border-radius: 50%;
		position: fixed;
		top: 900rpx;
		right: 30rpx;
		z-index: 99999;
		& > image {
			width: 76rpx;
			height: 76rpx;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
	}
}
.detail-comment {
	padding: 52rpx 0 52rpx 32rpx;

	.comment-title {
		color: #333333;
		font-size: 36rpx;
		font-weight: 600;
		margin-bottom: 35rpx;
	}

	.comment-list {
		.comment-item {
			// @include itemFlex();
			position: relative;
			display: flex;

			.comment-head {
				height: 60rpx;
				width: 60rpx;
				border-radius: 50%;
				margin-right: 12rpx;
			}

			.commentnickname {
				color: #333333;
				font-size: 24rpx;
				flex: 1;
				padding-bottom: 24rpx;
				padding-right: 24rpx;
				border-bottom: 2rpx solid #efefef;
				margin-bottom: 32rpx;

				.comment-name {
					font-size: 20rpx;
					color: #666666;
				}
			}

			.comment-time {
				color: #999999;
				font-size: 20rpx;
				position: absolute;
				top: 3rpx;
				right: 32rpx;
			}
		}
	}
}

.detail-bottom {
	padding: 15rpx 30rpx;
	width: 100%;
	height: 98rpx;
	box-sizing: border-box;
	background-color: #ffffff;
	position: fixed;
	bottom: 40rpx;
	left: 0;
	right: 0;
	@include itemFlex();

	icon {
		width: 64rpx;
		height: 64rpx;
	}

	.detail-search-box {
		@include itemFlex();
		flex: 1;
		height: 100%;
		background: #f1f2f6;
		border-radius: 8rpx;
		padding: 0 18rpx;

		.icon-search {
			width: 36rpx;
			height: 36rpx;
			background: url(https://nabercat.oss-cn-hangzhou.aliyuncs.com/acat-xcx/pinglunshur-icon.png) no-repeat;
			background-size: cover;
			margin-right: 10rpx;
		}

		& > input {
			height: 100%;
		}
	}

	.detail-bottom-item {
		@include itemFlex();
		flex-direction: column;
		color: #333333;
		margin-left: 24rpx;
		position: relative;
		& > text {
			position: absolute;
			top: -10rpx;
			right: -18rpx;
			width: 36rpx;
			height: 20rpx;
			padding: 2rpx;
			box-sizing: border-box;
			background: #e56048;
			border-radius: 10rpx;
			color: #ffffff;
			text-align: center;
			font-size: 14rpx;
		}

		.icon-comment {
			background: url(https://nabercat.oss-cn-hangzhou.aliyuncs.com/acat-xcx/pinglun-icon.png);
			background-size: cover;
		}

		.icon-like {
			background: url(https://nabercat.oss-cn-hangzhou.aliyuncs.com/acat-xcx/dianzan-icon.png);
			background-size: cover;
		}

		.icon-like-active {
			background: url(https://nabercat.oss-cn-hangzhou.aliyuncs.com/acat-xcx/dianzan-icon-active.png);
			background-size: cover;
		}
		.icon-zhuanfa {
			background: url(https://nabercat.oss-cn-hangzhou.aliyuncs.com/acat-xcx/zhuanfa-icon.png);
			background-size: cover;
		}
	}
}

.title-img {
	width: 257rpx;
	height: 75rpx;
	display: block;
	margin: 0 auto 35rpx;
}

.popup-list {
	background: #ffffff;
	.popup-item {
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		border-top: 2rpx solid #999999;
		font-size: 28rpx;
		background: #ffffff;
		&:nth-of-type(1) {
			border: none;
		}
	}
}
.posters {
	width: 375px;
	height: 550px;
	background: #ffffff;
	z-index: 9999;
	position: fixed;
	top: 90px;
	left: -9000000px;
}
.blind-canvas-mask {
	width: 100vw;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	background: rgba(0, 0, 0, 0.8);
	z-index: 99;
}
.blind-canvas {
	width: 280px;
	height: 496px;
	// background: #ffffff;
	position: fixed;
	top: 212rpx;
	left: 50%;
	transform: translateX(-50%);
	z-index: 100;
	border-radius: 4px;
	// overflow: hidden;
	.blinds {
		width: 100%;
		height: 100%;
		border-radius: 4px;
		overflow: hidden;
		position: absolute;
		top: 0;
		left: 0;
	}
	.close {
		display: block;
		width: 58rpx;
		height: 56rpx;
		background: url(https://nabercat.oss-cn-hangzhou.aliyuncs.com/acat-xcx/xq-haibai-close.png) no-repeat;
		background-size: cover;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: -92rpx;
	}
	.dowmLoad {
		display: block;
		width: 78rpx;
		height: 54rpx;
		background: url(https://nabercat.oss-cn-hangzhou.aliyuncs.com/acat-xcx/xq-haibao-xz.png) no-repeat;
		background-size: cover;
		position: absolute;
		right: 16rpx;
		top: 24rpx;
		z-index: 9999;
	}
}
</style>
